<template>
  <div class="hot">
  	  <div class="hot-title">热门城市</div>
      <ul class="hot-content">
  	    <li class="hot-item" v-for="item in hotCities" :key="item.id">{{item.name}}</li>
      </ul>
  </div>
</template>

<script>
	export default {
		name: 'CityHot',
		props: {
			hotCities:Array
		}
	}
</script>

<style lang="stylus" scoped>
.hot-title
  height 1.6rem
  line-height 1.6rem
  font-size .4rem
  text-indent 1em
.hot-content
  width 100%
  background #fff
  display flex
  flex-flow: row wrap
  .hot-item
    flex 0 1 33.33%
    height 2.4rem
    font-size .6rem
    text-align center
    line-height 2.4rem
    box-sizing border-box
    border-top 1px solid #ccc
    border-right 1px solid #ccc
  .hot-item:nth-child(-n+3)
    border-top none
  .hot-item:nth-child(3n+3)
    border-right none
</style>
